<template>
    <div style="height: 100%">
      <div class="main-tab">
        <x-header id="header" slot="header" :left-options="{showBack: false}" >
          <x-icon type="ios-arrow-back" slot="left" style="fill:#fff;" @click="back"></x-icon>
          <span slot="default" class="header-tit">更多评论</span>
        </x-header>
        <div class="main">
          <group style="padding-bottom: 0px">
            <div class="part" v-for="(item,index) in commentlist" :key="item.id">
              <div class="reply">
                <div class="reply-left">
                  <img :src="item.commenterAvatar" alt="">
                  <div class="reply-info">
                    <span class="reply-name">{{item.commenterName}}</span>
                    <span class="reply-date">{{item.createTime.substring(0,10)}}<span class="reply-time">{{item.createTime.substring(11,16)}}</span></span>
                  </div>
                </div>
                <div class="reply-right">
                  <span @click="reply(item.commenterName,item.commenterId,item.id)">回复</span>
                </div>
              </div>
              <div class="reply-comment">
                <span>{{item.commentContent}}</span>
              </div>
              <div class="re-reply">
                <div class="part" v-for="(re,index) in item.reply" :key="re.id">
                  <div class="re-top">
                    <div class="re-left">
                      <img src="../../../static/img/my-off.png" alt="">
                      <div class="re-info">
                        <span class="re-name">{{re.replyName}}</span>
                        <span class="re-date">2019-01-01<span class="re-time">11:11</span></span>
                      </div>
                    </div>
                    <div class="re-right">
                      <span @click="reply(re.replyName,re.cid,re.id)">回复</span>
                    </div>
                  </div>
                  <div class="re-bottom">
                    <span class="re">回复&nbsp;@ <span class="comment-user">{{re.toReplyName}}</span>：<span class="detail">{{re.content}}</span></span>
                  </div>
                </div>
              </div>
            </div>
          </group>
          <group class="write" gutter="0">
            <div class="bottom-part">
              <x-input placeholder="写评论...." class="input" v-model="content">
                <span slot="label" v-show="isReply">@<span v-model="toreplyname" style="font-size: 14px;color: #4A90E2;margin-right: 0.36rem">{{toreplyname}}</span></span>
              </x-input>
              <span class="send" @click="addArticleReply">发送</span>
            </div>
          </group>
        </div>
      </div>
    </div>
</template>

<script>
  import  {getArticleCommentList,addArticleReply} from '@/api/forum'
  import  {cookie} from 'vux'
    export default {
        name: "morecomment",
      inject:['reload'],
      data(){
          return{
            id:'',
            toreplyname:'',
            commentId:'',
            content:'',
            toCid:'',
            cid:1,
            isReply:false,
            commentlist:[
              {
                id:0
              },
              {
                id:1
              },
            ],
            detaillist:[
              {
                id:0
              },
              {
                id:1
              }
            ]
          }
      },
      methods:{
        getArticleCommentList(){
          this.id=this.globalData.id
          getArticleCommentList(this.id).then(res =>{
            console.log(res)
            this.commentlist=res.data;
          })
        },
        back(){
          this.$router.go(-1)
        },
        reply(commenterName,commenterId,id){
          this.toreplyname=commenterName;
          this.commentId=id;
          this.toCid=commenterId;
          this.isReply=true;
        },
        addArticleReply(){
          this.cid=JSON.parse(cookie.get('userInfo')).id;
          addArticleReply({
            articleId:this.id,
            commentId:this.commentId,
            content:this.content,
            cid:this.cid,
            ToCid:this.toCid,
          }).then(() =>{
            this.$vux.toast.show({
              text:'回复成功',
              type: 'success',
              time: 300
            })
            this.reload()
          })
        }
      },
      created(){
          this.getArticleCommentList();
      }
    }
</script>

<style scoped>
  #header{
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
  }
  .main{
    padding-top: 27.5px;
  }
  .reply{
    display: flex;
    justify-content: space-between;
  }
  .reply img{
    width: 2.86rem;
    height: 2.86rem;
    border-radius: 50%;
  }
  .reply-left{
    display: flex;
    flex-direction:row;
    /*margin-left: 1.07rem;*/
    margin-top: 1.07rem;
  }
  .reply-info{
    display: flex;
    flex-direction:column;
    margin-left: 0.71rem;
  }
  .reply-name{
    font-size: 14px;
    color: #4A4A4A;
    letter-spacing: -0.34px;
  }
  .reply-date{
    margin-top: 0.36rem;
    font-size: 12px;
    color: #9B9B9B;
    letter-spacing: -0.29px;
  }
  .reply-time{
    margin-left: 0.36rem;
  }
  .reply-right{
    margin-top: 1.07rem;
  }
  .reply-right span{
    font-size: 14px;
    color: #9B9B9B;
    letter-spacing: -0.34px;
    text-align: justify;
    /*margin-right: 1.08rem;*/
  }
  .reply-comment{
    margin-left: 3.57rem;
    margin-top: 0.72rem;
  }
  .re-comment span{
    font-size: 14px;
    color: #4A4A4A;
    letter-spacing: -0.34px;
  }
  .re-reply{
    background: #F4F4F4;
    border-radius: 2px;
    margin-left: 3.57rem;
    margin-right: 1.08rem;
    margin-bottom: 1.06rem;
    margin-top: 1.07rem;
  }
  .re-top{
    display: flex;
    justify-content: space-between;
  }
  .re-left{
    display: flex;
    flex-direction:row;
    /*margin-left: 1.07rem;*/
    margin-top: 1.07rem;
  }
  .re-left img{
    width: 2.14rem;
    height: 2.14rem;
    border-radius: 50%;
  }
  .re-info{
    display: flex;
    flex-direction:column;
    margin-left: 0.36rem;
  }
  .re-name{
    font-size: 14px;
    color: #4A4A4A;
    letter-spacing: -0.34px;
    text-align: justify;
  }
  .re-date{
    margin-top: 0.36rem;
    font-size: 12px;
    color: #9B9B9B;
    letter-spacing: -0.29px;
  }
  .re-time{
    margin-left: 0.36rem;
  }
  .re-right{
    margin-top: 1.07rem;
  }
  .re-right span{
    font-size: 14px;
    color: #9B9B9B;
    letter-spacing: -0.34px;
    text-align: justify;
    /*margin-right: 1.08rem;*/
  }
  .re-bottom{
    /*margin-left: 1.07rem;*/
    margin-top: 0.72rem;
    padding-bottom: 0.72rem;
  }
  .re{
    font-size: 14px;
    color: #9B9B9B;
    letter-spacing: -0.34px;
    text-align: justify;
  }
  .comment-user{
    font-size: 14px;
    color: #4A90E2;
    letter-spacing: -0.34px;
    text-align: justify;
  }
  .detail{
    width: 100%;
    font-size: 14px;
    color: #4A4A4A;
    letter-spacing: -0.34px;
    text-align: justify;
    word-break:break-all;
  }
  .part{
    border-bottom: solid 1px #EAEAEA;
    margin-left: 1.07rem;
    margin-right: 1.08rem;
  }
  .bottom-part{
    display: flex;
    flex-direction: row;
  }
  .write{
    background: #FFFFFF;
    box-shadow: 0 -4px 8px 0 rgba(0,0,0,0.02);
    height: 3.93rem;
    position: fixed;
    bottom: 0;
    left:0;
    width: 100%;
  }
  .input{
    background: #F4F4F4;
    border: none;
    border-radius: 1.43rem;
    width: 70%;
    /*height: 2.86rem;*/
    margin-left: 1.07rem;
    margin-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .send{
    font-size: 14px;
    color: #4A90E2;
    letter-spacing: 0;
    text-align: justify;
    margin-left: 0.71rem;
    margin-top: 1.21rem;
  }

</style>
